<template>
  <div class="content-item">
    <form class="condition_query">
      <span class="txt">员工</span>
      <el-input class="inline-input" size="medium" v-model="realname" placeholder="请输入" />

      <span class="txt">所属组织</span>
      <el-select class="inline-input" size="medium" v-model="depId" clearable placeholder="请选择组织">
        <el-option v-for="item in organizations" :key="item.depId" :label="item.depName" :value="item.depId" />
      </el-select>

      <span class="txt">标段</span>
      <el-select
        class="inline-input"
        size="medium"
        v-model="bidSection"
        clearable
        placeholder="请选择"
        @change="getWorkAreaList">
        <el-option v-for="item in biaoduanList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>

      <span class="txt">工区</span>
      <el-select class="inline-input" size="medium" v-model="areaId" clearable placeholder="请选择">
        <el-option v-for="item in workAreaInfo" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>

      <span class="txt">出入时间</span>
      <el-date-picker
        v-model="time"
        style="width: 250px; margin-right: 40px"
        type="daterange"
        value-format="yyyy-MM-dd"
        size="medium"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期" />

      <el-button type="primary" size="medium" icon="el-icon-search" @click="getInAndOutList">查询</el-button>
    </form>

    <div class="table-wrap">
      <TableModel :table-data="inAndOutList" :loading="loading">
        <el-table-column prop="realname" label="出入人员"></el-table-column>
        <el-table-column prop="username" label="ID" width="100"></el-table-column>
        <el-table-column prop="registerdate" label="出入时间"></el-table-column>
        <el-table-column prop="departname" label="所属组织" width="220"></el-table-column>
        <el-table-column prop="bidSectionName" label="标段"></el-table-column>
        <el-table-column prop="workAreaNames" label="所属工区"></el-table-column>
        <el-table-column prop="name" label="班组"></el-table-column>
        <el-table-column label="出入口">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.inouttype == 1" size="mini">入口</el-tag>
            <el-tag v-if="scope.row.inouttype == 2" type="danger" size="mini">出口</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="抓拍照片">
          <template slot-scope="scope">
            <el-image
              style="width: 30px; height: 30px; border-radius: 4px;"
              :src="scope.row.recImage"
              fit="cover"
              :preview-src-list="[scope.row.recImage]"/>
          </template>
        </el-table-column>
      </TableModel>
      <Pagination :pageData="pageData" @pageNum="pageNumData" @pageSize="pageSizeData"></Pagination>
    </div>
  </div>
</template>

<script>
import Pagination from "../Pagination";
import TableModel from "../../models/TableModel";
import HttpInterface from "../../../util/httpInterface";
import HttpConfig from "../../../util/httpConfig";
import { mapState, mapActions } from "vuex";

export default {
  name: "InAndOut",
  components: {
    Pagination, TableModel
  },
  data() {
    return {
      loading: false,
      realname: "",
      depId: "",
      time: [],
      bidSection: "",
      areaId: "",
      inAndOutList: [],
      workAreaInfo: [],
      pageData: {
        total: 0,
        pageNum: 1,
        pageSize: 20
      },
    };
  },

  computed: {
    ...mapState(["organizations", "biaoduanList"])
  },

  methods: {
    ...mapActions(["selectByBidSection"]),

    getWorkAreaList() {
      let _this = this;
      this.selectByBidSection({
        bidSection: this.bidSection,
        fn: function (data) {
          _this.workAreaInfo = data;
        }
      })
    },

    pageSizeData(data) {
      this.pageData.pageSize = Number(data);
      this.getInAndOutList();
    },

    pageNumData(data) {
      this.pageData.pageNum = Number(data);
      this.getInAndOutList();
    },

    // 获取出入记录数据
    getInAndOutList() {
      this.loading = true;
      let _this = this;
      let { pageData, realname, depId, bidSection, areaId, time, biaoduanList } = this;
      let params = {
        pageNum: pageData.pageNum,
        pageSize: pageData.pageSize
      };

      if (realname) params.realname = realname;
      if (depId) params.depId = depId;
      if (bidSection) params.bidSection = bidSection;
      if (areaId) params.areaId = areaId;
      if (time && time.length > 0) {
        params.starttime = time[0] + " 00:00:00";
        params.endtime = time[1] + " 23:59:59";
      }
      HttpInterface.requestGet(this, HttpInterface.URL_DUTYLOG_LIST, params, function(res) {
        let { data, total } = res.data;
        data.forEach(item => {
          item.recImage = HttpConfig.serverUrl + item.rec_image;

          biaoduanList.forEach(key => {
            if (item.bidSection == key.id) item.bidSectionName = key.name;
          })
        })
        _this.pageData.total = total;
        _this.inAndOutList = data;
        _this.loading = false;
      }, null);
    },
  }
};
</script>

<style  scoped lang="scss">
.condition_query {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  .inline-input {
    width: 150px;
    margin-right: 22px;
  }
}

.txt {
  margin-right: 10px;
  font-size: 14px;
}

.table-wrap >>> .el-table .cell {
  line-height: normal;
}

.el-input--medium{
  width: 120px !important;
}
</style>
